<template>
  <div class="menuWrap dark">
    <a-layout-sider class="sider" :collapsed="collapsed">
      <div class="top" @click="logoClick">
        <div class="logoLeftImg"></div>
        <span class="logoName AlibabaPuHuiTi" v-if="!collapsed">智隼管理系统</span>
      </div>
      <div class="content">
        <a-menu mode="inline" :selectedKeys="[activeKey]" :inline-collapsed="collapsed" style="height: 100%"
          @select="menuSelect" theme="dark">
          <template v-for="item in menuList">
            <a-menu-item :key="item.id" v-if="
              !Array.isArray(item.child) || (Array.isArray(item.child) && item.child.length == 0)
            ">
              <Icons :type="item.icon" v-if="item.icon" />
              <span>{{ item.name }}</span>
            </a-menu-item>
            <a-sub-menu :key="item.id" v-if="Array.isArray(item.child) && item.child.length > 0">
              <span slot="title">
                <Icons :type="item.icon" v-if="item.icon" />
                <span>{{ item.name }}</span>
              </span>
              <a-menu-item v-for="it in item.child" :key="it.id">
                <Icons :type="it.icon" v-if="it.icon" />
                {{ it.name }}
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-menu>
      </div>
      <div class="bottom">
        <a-button class="button" size="small" :icon="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapsed"
          type="default" :ghost="true">
        </a-button>
      </div>
    </a-layout-sider>
  </div>
</template>
<script>
import Icons from "./Icons.vue";
import { routeAuthority } from "../js/js";
export default {
  name: "Menus",
  components: { Icons },
  data() {
    return {
      collapsed: false,
      menuList: [],
      activeKey: "",
      menuArratList: [],
      loading: false,
    };
  },
  methods: {
    // logo点击
    logoClick() {
      this.$router.replace({ path: "/manage" });
    },
    getLocation() {
      let m = localStorage.getItem("collapsed");
      if (m) {
        this.collapsed = m == "out" ? false : true;
      }
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
      let collapsed = this.collapsed ? "in" : "out";
      localStorage.setItem("collapsed", collapsed);
    },
    getMenuData() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      this.getAxios(this.$getmenutree, {})
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            // 测试数据
            // data.push({
            //   "id": "993",
            //   "parentId": "1",
            //   "name": "知识库",
            //   "child": [],
            //   "icon": "retweet",
            //   "ischecked": ""
            // })
            // data.push({
            //   "id": "994",
            //   "parentId": "1",
            //   "name": "灭火器",
            //   "child": [],
            //   "icon": "retweet",
            //   "ischecked": ""
            // })
            this.menuList = data;
            let tempMenuList = [];
            data.filter((val) => {
              tempMenuList.push(val);
              if (Array.isArray(val.child) && val.child.length > 0) {
                val.child.filter((va) => {
                  tempMenuList.push(va);
                });
              }
            });
            this.menuArratList = tempMenuList;
            localStorage.setItem("menuList", JSON.stringify(data));
            localStorage.setItem("menu", JSON.stringify(tempMenuList));
            routeAuthority(this.$route, this);
            this.headChange();
          }
        })
        .finally(() => {
          this.loading = false;
          this.menuActive();
        });
    },
    menuSelect({ key }) {
      this.activeKey = key;
      if (key == "11") {
        this.logoClick();
      } else if (key == "17") {
        this.$router.push({
          path: "/Application",
          query: { id: key },
        });
      } else {
        this.$router.push({
          path: "/tables",
          query: { id: key },
        });
      }
    },
    // 激活菜单
    menuActive() {
      let routeInfo = this.$route;
      // 首页的单独判断
      if (["/manage"].includes(routeInfo.path)) {
        this.activeKey = "11";
      } else if (Object.keys(routeInfo.query).length > 0) {
        let id = routeInfo.query.id;
        if (id) {
          this.activeKey = id;
        }
      }
    },
    headChange() {
      let tempMenuList = this.menuArratList;
      let str;
      let ids = this.$route.query.id;
      if (ids && Array.isArray(tempMenuList) && tempMenuList.length > 0) {
        tempMenuList.filter((val) => {
          if (val.id == ids) {
            str = val.name;
          }
        });
      } else {
        str = "首页";
      }
      this.$bus.$emit("headInfo", str);
    },
    onRefresh() {
      this.getMenuData();
    },
  },
  created() {
    this.$bus.$on("menuOnRefresh", this.onRefresh());
  },
  mounted() {
    this.getLocation();
    this.getMenuData();
  },
  watch: {
    // 权限判断
    menuArratList: {
      handler: function (nVal, oVal) {
        // 路由变化时执行的操作
        let routeInfo = this.$route;
        // if (routeInfo.query && routeInfo.query.id) {
        //     let ids = routeInfo.query.id;
        //     let menuAList = this.menuArratList.map(val => val.id);
        //     if (!menuAList.includes(ids)) {
        //         this.$message.error({
        //             content: '暂无该菜单权限',
        //             duration: 2.5,
        //         })
        //         this.$router.push({
        //             path: '/manage',
        //         })
        //         return;
        //     }
        // }
      },
      // 设置为深度监听
      deep: true,
    },
    // 监听路由对象
    $route: {
      handler: function (to, from) {
        // 路由变化时执行的操作
        this.menuActive();
        this.headChange();
      },
      // 设置为深度监听
      deep: true,
      immediate: true,
    },
  },
  beforeDestroy() {
    this.$bus.$off("menuOnRefresh");
  },
};
</script>
<style lang="less" scoped>
.menuWrap {
  .sider {
    width: 100%;
    height: 100%;
    background-color: transparent;
  }

  .top {
    // width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .logoLeftImg {
      width: 35.9px;
      height: 45.25px;
      background-image: url(~@/assets/images/screen/topLogo.png);
      background-size: cover;
      background-position: center center;
      opacity: 0.65;
      line-height: 43px;
    }

    .logoName {
      font-size: 18px;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin-left: 8px;
    }
  }

  .content {
    width: 100%;
    border-top: 1px solid #cdcdcd;
    height: calc(100vh - 60px - 1px - 1px - 50px);
  }

  .bottom {
    border-top: 1px solid #cdcdcd;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;

    .button {
      margin-right: 20px;
    }
  }
}

.ant-menu {
  box-sizing: content-box;
}
</style>
